<template>
  <div class="box">
    <div ref="box" style="width:150px; height:150px" />
    <p>{{ title }} <span :style="color">{{ backlogNum }}</span></p>
  </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  props: {
    // 背景色
    bgc: {
      type: String,
      required: true
    },
    // 标题
    title: {
      type: String,
      required: true
    },
    // 边框颜色
    // eslint-disable-next-line vue/require-default-prop
    borderColor: {
      type: String,
      require: true
    },
    // 水的颜色
    itemColor: {
      type: String,
      required: true
    },
    // 百分比数据
    // eslint-disable-next-line vue/require-prop-types
    backlogPercent: {
      // type: [Object, String],
      required: true
    },
    // 球下面的数据
    // eslint-disable-next-line vue/require-prop-types
    backlogNum: {
      required: true
    }
  },
  data() {
    return {
      color: 'color:' + this.itemColor
    }
  },
  created() {
    setTimeout(() => {
    // console.log(this.borderColor)
      this.boll()
    }, 1000)
  },
  methods: {
    boll() {
      // console.log(this.backlog)
      const myChart = echarts.init(this.$refs.box)
      var option = {
        title: [
        // 第一个球
          {
            subtextStyle: {
              color: '#000',
              fontSize: '16',
              fontWeight: '700'
            },
            // subtext: '运输中 53',
            left: '50%',
            top: '82%',
            textAlign: 'center'
          }
        ],
        series: [
        // 第一个球
          {
            type: 'liquidFill',
            radius: '86%',
            center: ['50%', '50%'],
            data: [40 / 100],
            itemStyle: {
              color: this.itemColor,
              shadowBlur: 20
            },
            outline: {
              borderDistance: 4,
              color: '#156ACF',
              itemStyle: {
                borderWidth: 1,
                borderColor: this.borderColor
              }
            },
            backgroundStyle: {
              color: this.bgc
            },
            label: {
              fontSize: 16,
              color: 'black',
              fontWeight: '400',
              insideColor: '#000'
            }
          }

        ]

      }
      myChart.setOption(option)
    }
  }
}
</script>

<style lang="scss" scoped>
.box{
  margin-top: 10px;
  width: 150px;
  /* display: flex;
  flex-direction: column;
  justify-content: center;
  justify-items: center; */
  text-align: center;
  color: #303133;
  font-size: 16px;
  font-weight: 700;
  span{
    font-size: 16px;
  }
}
</style>
